<template>
  <div class="navigationMain">
    <div class="navigationLogo" @click="gotoHome">
      <img src="https://zyl-bolg-1256871043.cos.ap-guangzhou.myqcloud.com/back1%2FnavLogo.png">
    </div>
    <div class="navigationNavList">
      <template v-for="(item, index) in navData">
        <span @click="navChange(item)" :class="{spanHover:navIndex === item.title}">{{ item.title }}</span>
      </template>
      <i class="el-icon-s-fold" @click="sidebarChange" v-if="sidebarType === false"></i>
      <i class="el-icon-s-unfold" @click="sidebarChange" v-else></i>
    </div>
    <el-drawer v-model="sidebarType" title="I am the title" :with-header="false">
      <div class="sidebarMain">
        <img src="https://zyl-bolg-1256871043.cos.ap-guangzhou.myqcloud.com/blog2%2FhomeLogo.png">
        <template v-for="(item, index) in navData">
          <div class="zylTransition" @click="navChange(item)" :class="{divHover:navIndex === item.title}"><i class="el-icon-menu"></i> {{ item.title }}</div>
        </template>
      </div>
    </el-drawer>
  </div>
</template>
<script>
import Interface from '.././views/home/serve/api';
export default {
  // 头部导航
  name: 'navigation',
  components: {
  },
  data () {
    return {
      navData: [],
      navIndex: '首页',
      sidebarType: false,
    };
  },
  mounted () {
    this.getNavigationStateNavtype();
    this.navIndex = this.$route.meta.title;
  },
  methods: {
    // 导航
    getNavigationStateNavtype () {
      let params = {
        state: '是',
        navtype: '一级栏目',
      };
      Interface.getNavigationStateNavtype(params).then(res => {
        if (res.status === 200) {
          this.navData = res.data;
        }
      })
    },

    // 记录栏目访问量
    postNavigationUpdateFlow (id, flow) {
      let params = {
        id: id,
        flow: flow,
      };
      Interface.postNavigationUpdateFlow(params).then(res => {})
    },

    // 跳转
    navChange (item) {
      this.$parent.indexscrollTopFn();
      this.postNavigationUpdateFlow(item.id, item.flow);
      this.navIndex = item.title;
      if (item.title === '检索') {
        let routeUrl = this.$router.resolve({
          path: item.navurl,
        });
        window.open(routeUrl.href, '_blank');
      } else {
        this.$router.push({
          path: item.navurl
        })
      }
    },

    // 侧栏
    sidebarChange () {
      this.sidebarType = !this.sidebarType;
    },

    // 返回引导页
    gotoHome () {
      window.open('http://www.zylweb.top', '_blank');
    },
  },
}
</script>
